<!DOCTYPE html>
<html lang="en">
<head>
    <title>侧边栏L3-个人中心页</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<!-- 引入字体 -->
	<script src="../../js/libs/webfontloader.min.js"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>
	<!-- 引入bootstrap css -->
	<link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-reboot.css">
	<link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-grid.css">
	<!-- 引入主要 css -->
	<link rel="stylesheet" type="text/css" href="../../css/main.css">
	<link rel="stylesheet" type="text/css" href="../../css/fonts.min.css">
</head>
<body class="page-has-left-panels">
<!-- Preloader 预加载 -->
<div id="hellopreloader">
	<div class="preloader">
		<svg width="45" height="45" stroke="#fff">
			<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="6;22"/>
					<animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="6;22"/>
					<animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="8">
					<animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
							 values="6;1;2;3;4;5;6"/>
				</circle>
			</g>
		</svg>
		<div class="text">Loading ...</div>
	</div>
</div>
<!-- ... end Preloader 结束预加载-->
<!-- Fixed Sidebar Left 左侧菜单 -->
<div class="fixed-sidebar">
	<!--折叠时左侧菜单-->
	<div class="fixed-sidebar-left sidebar--small" id="sidebar-left">
		<a href="person_main.html" class="logo">
			<div class="img-wrap">
				<img src="../../img/logo.png" alt="Olympus">
			</div>
		</a>
		<div class="mCustomScrollbar" data-mcs-theme="dark">
			<ul class="left-menu">
				<!--切换菜单栏-->
				<li>
					<a href="#" class="js-sidebar-open">
						<svg class="olymp-menu-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
							 data-original-title="切换菜单栏">
							<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
						</svg>
					</a>
				</li>
				<!--新闻广场-->
				<li>
					<a href="news.html">
						<svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
							 data-original-title="新闻广场">
							<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
						</svg>
					</a>
				</li>
				<!--好友动态-->
				<li>
					<a href="publish_friends.html">
						<svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
							 data-original-title="好友动态">
							<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
						</svg>
					</a>
				</li>
				<!--个人中心-->
				<li>
					<a href="person_detail.html">
						<svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
							 data-placement="right" data-original-title="个人中心">
							<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
						</svg>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!--end折叠时左侧菜单-->
	<!--展开时左侧菜单-->
	<div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1">
		<a href="person_main.html" class="logo">
			<div class="img-wrap">
				<img src="../../img/logo.png" alt="Olympus">
			</div>
			<div class="title-block">
				<h6 class="logo-title">olympus</h6>
			</div>
		</a>
		<div class="mCustomScrollbar" data-mcs-theme="dark">
			<ul class="left-menu">
				<!--切换菜单栏-->
				<li>
					<a href="#" class="js-sidebar-open">
						<svg class="olymp-close-icon left-menu-icon">
							<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-close-icon"></use>
						</svg>
						<span class="left-menu-title">切换菜单栏</span>
					</a>
				</li>
				<!--新闻广场-->
				<li>
					<a href="news.html">
						<svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
							 data-original-title="">
							<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
						</svg>
						<span class="left-menu-title">新闻广场</span>
					</a>
				</li>
				<!--好友动态-->
				<li>
					<a href="publish_friends.html">
						<svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
							 data-original-title="">
							<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
						</svg>
						<span class="left-menu-title">好友动态</span>
					</a>
				</li>
				<!--个人中心-->
				<li>
					<a href="person_detail.html">
						<svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
							 data-placement="right" data-original-title="">
							<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
						</svg>
						<span class="left-menu-title">个人中心</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!--end展开时左侧菜单-->
</div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->
<!-- Header-BP 头部导航栏-->
<header class="header" id="site-header">
	<div class="page-title">
		<h6>个人中心</h6>
	</div>
	<div class="header-content-wrapper">
		<!--数据：搜索-->
		<form class="search-bar w-search notification-list friend-requests">
			<div class="form-group with-button">
				<input class="form-control" placeholder="搜索人或事……" type="text" required/>
				<button>
					<svg class="olymp-magnifying-glass-icon">
						<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use>
					</svg>
				</button>
			</div>
		</form>
		<!--end数据：搜索-->
		<div class="control-block">
			<!--导航栏用户-->
			<div class="author-page author vcard inline-items more">
				<div class="author-thumb">
					<!--数据：当前用户头像-->
					<img alt="author" src="../../img/author-page.jpg" class="当前用户">
					<div class="more-dropdown more-with-triangle">
						<div class="mCustomScrollbar" data-mcs-theme="dark">
							<div class="ui-block-title ui-block-title-small">
								<h6 class="title">当前</h6>
							</div>
							<ul class="account-settings">
								<li>
									<a href="person_detail.html">
										<svg class="olymp-menu-icon">
											<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
										</svg>
										<span>个人资料</span>
									</a>
								</li>
								<li>
									<a href="publish_add.html">
										<svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip"
											 data-placement="right" data-original-title="FAV PAGE">
											<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
										</svg>
										<span>发表动态</span>
									</a>
								</li>
								<li>
									<a href="logged_out.html">
										<svg class="olymp-logout-icon">
											<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-logout-icon"></use>
										</svg>
										<span>登出</span>
									</a>
								</li>
							</ul>
						</div>

					</div>
				</div>
				<!--数据：当前用户昵称-->
				<a href="person_main.html" class="author-name fn">
					<div class="author-title">
						James Spiegel
						<svg class="olymp-dropdown-arrow-icon">
							<use xlink:href="../../svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon"></use>
						</svg>
					</div>
				</a>
			</div>
			<!--end导航栏用户-->
		</div>
	</div>
</header>
<!-- ... end Header-BP 结束头部导航栏-->
<!--头部空间-->
<div class="header-spacer"></div>
<!--结束头部空间-->
<!--个人中心主体-->
<div class="container">
    <div class="row">
		<!--右侧-->
        <div class="col col-xl-9 order-xl-2 col-lg-9 order-lg-2 col-md-12 order-md-1 col-sm-12 col-12">
            <div class="ui-block">
                <div class="ui-block-title">
                    <h6 class="title">个人资料</h6>
                </div>
                <div class="ui-block-content">
                    <!-- 表单：个人信息  -->
					<!--数据：个人描述、年龄、昵称、密码、性别-->
                    <form>
                        <div class="row">
                            <div class="col col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="form-group label-floating">
                                    <label class="control-label">个人描述</label>
                                    <textarea class="form-control" placeholder="" required></textarea>
                                </div>
                                <div class="form-group label-floating is-empty">
                                    <label class="control-label">年龄</label>
                                    <input class="form-control" placeholder="" type="text" required>
                                </div>
                            </div>
                            <div class="col col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="form-group label-floating is-empty">
                                    <label class="control-label">昵称</label>
                                    <input class="form-control" placeholder="" type="text" required>
                                </div>
                                <div class="form-group label-floating">
                                    <label class="control-label">密码</label>
                                    <input class="form-control" placeholder="" type="password" required>
                                </div>
                                <div class="form-group label-floating">
                                    <label class="control-label">性别</label>
                                    <input class="form-control" placeholder="" type="text" required>
                                </div>
                            </div>
							<!--事件：还原-->
                            <div class="col col-lg-6 col-md-6 col-sm-12 col-12">
                                <button class="btn btn-secondary btn-lg full-width">还原</button>
                            </div>
							<!--事件：提交-->
                            <div class="col col-lg-6 col-md-6 col-sm-12 col-12">
                                <button class="btn btn-primary btn-lg full-width">提交</button>
                            </div>
                        </div>
                    </form>
                    <!-- 结束表单：个人信息  -->
                </div>
            </div>
        </div>
		<!--结束右侧-->
		<!--左侧-->
        <div class="col col-xl-3 order-xl-1 col-lg-3 order-lg-1 col-md-12 order-md-2 col-sm-12 col-12 responsive-display-none">
            <!--个人中心选择项-->
			<div class="ui-block">
                <div class="your-profile">
                    <div class="ui-block-title ui-block-title-small">
                        <h6 class="title">个人中心</h6>
                    </div>
                    <div class="ui-block-title">
                        <a href="person_detail.html" class="h6 title">个人资料</a>
                    </div>
					<!--数据：通知数、聊天消息、好友请求数-->
					<!--不显示就注释掉-->
                    <div class="ui-block-title">
                        <a href="notice.html" class="h6 title">通知</a>
                        <!--<a href="notice.html" class="items-round-little bg-primary">2</a>-->
                    </div>
                    <div class="ui-block-title">
                        <a href="chat.html" class="h6 title">聊天消息</a>
                    </div>
                    <div class="ui-block-title">
                        <a href="friends_request.html" class="h6 title">好友请求</a>
                        <!--<a href="friends_request.html" class="items-round-little bg-blue">4</a>-->
                    </div>
					<div class="ui-block-title">
						<a href="firends_delete.html" class="h6 title">好友管理</a>
						<!--<a href="friends_request.html" class="items-round-little bg-blue">4</a>-->
					</div>
                </div>
            </div>
			<!--end个人中心选择项-->
        </div>
    	<!--结束左侧-->
	</div>
</div>
<!-- 结束个人中心主体 -->
<!--向上返回 按钮-->
<a class="back-to-top" href="#">
    <img src="../../svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
</a>

<!-- JS Scripts -->
<script src="../../js/jQuery/jquery-3.4.1.js"></script>
<script src="../../js/libs/jquery.appear.js"></script>
<script src="../../js/libs/jquery.mousewheel.js"></script>
<script src="../../js/libs/perfect-scrollbar.js"></script>
<script src="../../js/libs/jquery.matchHeight.js"></script>
<script src="../../js/libs/svgxuse.js"></script>
<script src="../../js/libs/imagesloaded.pkgd.js"></script>
<script src="../../js/libs/Headroom.js"></script>
<script src="../../js/libs/velocity.js"></script>
<script src="../../js/libs/ScrollMagic.js"></script>
<script src="../../js/libs/jquery.waypoints.js"></script>
<script src="../../js/libs/jquery.countTo.js"></script>
<script src="../../js/libs/popper.min.js"></script>
<script src="../../js/libs/material.min.js"></script>
<script src="../../js/libs/bootstrap-select.js"></script>
<script src="../../js/libs/smooth-scroll.js"></script>
<script src="../../js/libs/selectize.js"></script>
<script src="../../js/libs/swiper.jquery.js"></script>
<script src="../../js/libs/isotope.pkgd.js"></script>
<script src="../../js/libs/ajax-pagination.js"></script>
<script src="../../js/libs/circle-progress.js"></script>
<script src="../../js/libs/loader.js"></script>
<script src="../../js/libs/run-chart.js"></script>
<script src="../../js/libs/jquery.magnific-popup.js"></script>
<script src="../../js/libs/ion.rangeSlider.js"></script>

<script src="../../js/main.js"></script>
<script src="../../js/libs-init/libs-init.js"></script>
<script defer src="../../fonts/fontawesome-all.js"></script>

<script src="../../Bootstrap/dist/js/bootstrap.bundle.js"></script>

</body>

</html>